<template>
    <commonPage :showHeader="false">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
    <div class="all">
        
        <div class="top">
        <div class="aa" :class="check_color == 1? 'checked':''" @click="check_num(1)">
          <p>社区好人</p>
        </div>
        <div class="aa" :class="check_color == 2? 'checked':''" @click="check_num(2)">
          <p>鹿城好人</p>
        </div>
        <div class="aa" :class="check_color == 3? 'checked':''" @click="check_num(3)">
          <p>温州好人</p>
        </div>
        <div class="aa" :class="check_color == 4? 'checked':''" @click="check_num(4)">
          <p>浙江好人</p>
        </div>
        <div class="aa" :class="check_color == 5? 'checked':''" @click="check_num(5)">
          <p>中国好人</p>
        </div>
      </div>
      <div class="content">
        <div v-show="check_color == 1">
            <div class="sq">
                <div class="oo">
                    <div class="text" v-for="(value1,n1) in obj1" :key="n1">
                        <div class="img"><img src="@/assets/img/touxiang.png" width="100%"></div>
                        <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;{{value1.name}}</p>
                        <p>所属街镇:&nbsp;&nbsp;{{value1.jz}}</p>
                        <p>敬业奉献:&nbsp;&nbsp;{{value1.fx}}</p>
                    </div>
                </div>
                <div class="button1">
                <van-button square block color="#168ce2" native-type="submit">
                    <div class="bb">
                        <div><img src="@/assets/img/submit.png" width="100%"></div>
                        <p>提交申报</p>
                    </div> 
                </van-button>
                </div>
            </div>
        </div>

        <div v-show="check_color == 2">
            <div>
                这里是鹿城好人的内容
            </div>
        </div>

        <div v-show="check_color == 3">
            <div>
                这里是温州好人的内容
            </div>
        </div>

        <div v-show="check_color == 4">
            <div>
                这里是浙江好人的内容
            </div>
        </div>
        <div v-show="check_color == 5">
            <div>
                这里是中国好人的内容
            </div>
        </div>
      </div>

    </div>

    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../components/common/commonPage";
export default {
  name: "dianxing1",
  data() {
    return {
      check_color:1,
      obj1:[
          {
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },{
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },{
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },{
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },{
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },{
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },{
            img:'',
            name:'张三',
            jz:'蒲鞋市街道',
            fx:'*******',
          },
      ]
    };
  },
  created() {
    
  },
  components: {
    commonPage,
  },
  methods: {
    check_num:function(index){
        this.check_color = index
    }
    
  },

};
</script>
<style scoped>
*{
  padding: 0;
  margin: 0;
}
.all{
    width: 100%;
}
.top{
    width: 100%;
    height: 2.50rem;
    display: flex;
    line-height: 2.50rem;
    text-align: center;
    border-bottom: 1px solid #d8e1e7;
}
.aa{
    width: 20%;
    background: white;
    color: #36434c;
}
.checked{
  background: #0282e0;
  color: white;
}
.content{
    background: white;
    padding: 1rem 0rem 1rem 1rem;
}
.oo{
    display: flex;
    flex-wrap: wrap;
}
.text{
   width: calc(50% - 1rem);
   padding-right: 1rem;
   padding-bottom: 1rem;
}
.img{
    width: 100%;
}
.text > p{
    font-size: 0.85rem;
    color: #013b65;
}
.button1{
    margin-right: 1rem;
}
.bb{
    display: flex;
}
.bb > div{
    width: 1.50rem;
}
.bb >p{
    margin: auto 0.2rem;
    font-size: 1rem;
}



</style>